<template>
	<view class="selectAddr">
		<view class="top flex-between">
			<view class="input flex">
				<input type="text" placeholder="选择城市" v-model="city" @input="changeInput">
				<input type="text" :placeholder="placeholder" v-model="keyword" @input="changeInput2">
			</view>
			<view class="btn">取消</view>
		</view>
		<city-select
			@cityClick="cityClick"
			:activeCity="activeCity"
			:hotCity="hotCity"
			:obtainCitys="obtainCitys"
			:isSearch="false"
			ref="citys"
			v-show="showCitys"
		></city-select>
		<view class="list-box">
			<block v-for="(item,index) in list" :key="index">
				<view class="list flex-between" @click="selectOne(item)">
					<image src="/static/pos-e1.png" mode="widthFix"></image>
					<view>
						<view class="h3">{{item.title}}</view>
						<text>{{item.address}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import citySelect from '@/components/city-select/city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				//当前城市
				activeCity: '',
				//热门城市
				hotCity: [],
				//显示的城市数据
				obtainCitys: [],
				placeholder:'输入出发地',
				city:"",
				showCitys:true,
				list:[],
				keyword:''
			};
		},
		onLoad(options) {
			console.log(options)
			let title
			if(options.type == '1'){
				title = "出发地";
			}else{
				title = "目的地"
			}
			this.placeholder = "输入" + title + "(详细地址)"
			uni.setNavigationBarTitle({
				title:title
			})
			this.getCity()
		},
		methods: {
			selectOne(item){
				uni.setStorageSync('addr',JSON.stringify(item))
				uni.navigateBack({
					delta:1
				})
			},
			changeInput(e){
				console.log(e)
				this.$refs.citys.serachCity = e.detail.value;
			},
			getCity(){
				this.$https.get('public/city').then(res=>{
					// this.nowRoutes = res.in
					this.obtainCitys = res.indexGroupCityList;
				})
			},
			cityClick(item) {
				this.city = item;
				this.showCitys = false;
			},
			changeInput2(e){
				this.keyword = e.detail.value;
				this.showCitys = false;
				this.getDetailAddr()
			},
			
			getDetailAddr(){
				this.$https.post('car/getAddressList',{
					region:this.city,
					keyword:this.keyword
				}).then(res=>{
					console.log(res)
					this.list = res;
				})
			}
		}
	}
</script>

<style lang="less">
	.selectAddr{
		padding-top: 90rpx;
		.top{
			position: fixed;
			top: 0;
			width: 100vw;
			height: 90rpx;
			z-index: 10;
			background: white;
			box-shadow: 0 5rpx 3rpx 0 #eee;
			box-sizing: border-box;
			padding: 0 30rpx;
			.input{
				height: 70rpx;
				width: 85%;
				background: #ddd;
				border-radius: 35rpx;
				input{
					font-size: 30rpx;
					padding: 0 20rpx;
					height: 100%;
					&:nth-child(1){
						width: 35%;
						border-right: 1px solid #aaa;
						text-align: center;
					}
				}
			}
		}
		.list-box{
			padding:0  30rpx;
			.list{
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;
				image{
					width: 40rpx;
					height: auto;
				}
				&>view{
					width: calc(100% - 60rpx);
				}
				.h3{
					font-size: 30rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 24rpx;
					color:#999;
				}
			}
		}
	}
</style>
